<template>
  <div class="box">
    <div>筛选降噪</div>
    <div>已过滤节点数量:0/58</div>
    <div class="custom-tree-container">
      <jm-tree style="max-width: 600px" 
        :data="dataSource" node-key="id" default-expand-all
        :expand-on-click-node="false" 
        :render-content="renderContent" 
        />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, computed } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import see from "@/assets/icon/see.png"
import seereactive from "@/assets/icon/see-reactive.png"
import nosee from "@/assets/icon/nosee.png"
import noseereactive from "@/assets/icon/nosee-reactive.png"
const emit = defineEmits(['ShowType','HideType'])
interface Tree {
  id: number
  label: string
  children?: Tree[]
  visible?: boolean;
}
const ShowThese = (node: Node, data: Tree) => {
  console.log(node, data);
  data.visible = true;
  emit('ShowType', data.value)
}

const HideThese = (node: Node, data: Tree) => {
  console.log(node, data);
  data.visible = false;
  emit('HideType', data.value)
}

const renderContent = (
  h,
  {
    node,
    data,
    store,
  }: {
    node: Node
    data: Tree
    store: Node['store']
  }
) => {
  if(node.level === 1) { // 根节点不显示操作按钮
    return h(
      'span',
      {
        class: 'custom-tree-node',
      },
      h('span', null, node.label)
    )
  } else {
    return h(
      'span',
      {
        class: 'custom-tree-node',
      },
      h('span', null, node.label),
      h(
        'span',
        null,
        h(
          'img', // 使用本地图片
          {
            src: data.visible ? seereactive : see, // 替换为实际的图片路径
            alt: 'Append',
            style: 'width: 20px; height: 20px; cursor: pointer;vertical-align: middle;margin-left:40px', // 设置图片样式
            onClick: () => ShowThese(node, data),
          }
        ),
        h(
          'img',
          {
            src: data.visible ? nosee : noseereactive, // 替换为实际的图片路径
            alt: 'Delete',
            style: 'width: 20px; height: 20px; margin-left: 8px; cursor: pointer;vertical-align: middle;', // 设置图片样式
            onClick: () => HideThese(node, data),
          }
        )
      )
    )
  }
}

const dataSource = ref < Tree[] > ([{
    id: 1,
    label: '实体类型筛选',
    children: [
      {
        id: 11,
        label: '指纹',
        value:'html_title',
        visible: true
      },
      {
        id: 12,
        label: '证书',
        value:'certificate',
        visible: true
      },
      {
        id: 13,
        label: '端口',
        value:'port',
        visible: true
      },
      {
        id: 14,
        label: '图标',
        value:'html_favicon',
        visible: true

      }
    ],
  }
])
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>